const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
/**
 * 缓存
 *  babel缓存
 *  文件资源缓存
 *  hash：每次打包后执行webpack生成唯一的hash值。
 *   ---> 问题：一次修改重新打包后清空所有缓存
 *  chunkhash: 如果打包来源于同一个chunk，hash值是一样的
 * contenthash：此 chunk 的 hash 值，只包括该内容类型的元素
 */ 
const CommonCssLoader = [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
        loader:"postcss-loader",
        options:{   
            postcssOptions:{
                ident: 'postcss', //说明options里面插件的使用是针对于谁的，我们这里是针对于postcss的
                plugins:(loader) =>[ //这里的插件只是这对于postcss
                    require('postcss-preset-env')() 
                ]
            }
        }
    }
]
// 使用browerslist的哪一个环境
process.env.NODE_ENV = "production"

module.exports = {
    entry:"./src/js/index.js",
    output:{
        filename:"js/bundle.[contenthash:10].js",
        path:resolve(__dirname,"build")
    },
    module:{
        rules:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            enforce:"pre",
            use:[
                {
                    loader:"eslint-loader",
                    options:{
                        fix:true
                    }
                }
            ]
        },
        {
            oneOf:[
                    //css提取单独文件 css-loader MiniCssExtractPlugin.loader
                {
                    test:/\.css$/,
                    use:[
                    ...CommonCssLoader
                    ]
                },
                // less->css 并提取文件 less-loader
                {
                    test:/\.less$/,
                    use:[
                        ...CommonCssLoader,
                        "less-loader"
                    ]
                },
                // js 语法检查  package.json中配置eslintConfig
                /**
                 *  "eslintConfig": {
                        "extends": "airbnb-base"
                    }
                */
                
                // js 兼容性检查 babel-loader, @babel/core @babel/preset-env, core-js3
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    use:[
                        {
                            loader:"babel-loader",
                            options:{
                                presets:[
                                    [
                                        "@babel/preset-env",
                                        {
                                            useBuiltIns:"usage",
                                            corejs:{
                                                version:3
                                            },
                                            targets:{
                                                chrome:"60",
                                                firefox:"60",
                                                ie:"9"
                                            }
                                        }
                                    ]
                                ],
                                // 开启babel缓存
                                // cacheDirectory:true
                            }
                        }
                    ]
                },
                //img 图片处理 url-loader
                {
                    test:/\.(jpg|png|gif|jpeg)/,
                    use:[
                        {
                            loader:"url-loader",
                            options:{
                                filename:"[hash].[ext]",
                                outputPah:"img",//输出路径
                                limit:20*1024,
                                esModule:false
                            }
                        }
                    ]
                },
                //html 压缩处理
                {
                    test:/\.html$/,
                    use:[ "html-loader" ]  
                },
                //打包其他资源
                {
                    exclude:/\.(gif|jpg|png|jpeg|js|css|less|html)$/,
                    use:[
                        {
                            loader:"file-loader",
                            options:{
                                outputPath:"media"
                            }
                        }
                    ]
                }
            ]
        }
           

     ]
    },
    plugins:[ 
        //css压缩  optimize-css-assets-webpack-plugin
        new optimizeCssAssetsWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:"css/build.[contenthash:10].css",
        }),
        //编译html
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/index.html",
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })

    ],
    mode:"production", //表示生成环境 自动压缩js,
    // devServer:{
    //     port:4000,
    //     contentBase:resolve(__dirname,"build"),
    //     open:true,
    //     hot:true
    // }
}